<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册</title>
	<link rel="stylesheet" href="__PUBLIC__/home/css/bootstrap.min.css">
	<link rel="stylesheet" href="__PUBLIC__/home/css/common.css">
	<link rel="stylesheet" href="__PUBLIC__/home/css/register.css">
	<script src="__PUBLIC__/home/js/jquery.min.js"></script>
	<script src="__PUBLIC__/home/js/bootstrap.min.js"></script>
	<script src="__PUBLIC__/home/js/jquery.validate.min.js"></script>
</head>
<body>
<!-- header: -->
<nav class="navbar navbar-default">
	<div class="container">
		<div class="navbar-header header">
			<a class="logo" href="{:U('Index/index')}">
				<img src="__PUBLIC__/home/images/logo.png" alt="logo">
				<span>奥骞网络科技有限公司</span>
			</a>
		</div>
	</div>
</nav>
<!-- content:-->
<div class="content">
	<div class="container input">
		<div class="row">
			<div class="col-md-12 register">
				<input type="button" value="注册账号">
			</div>
		</div>
	</div>
	<div class="container">
		<form class="form-horizontal message" action="{:U('Register/account')}" method="POST" id="register">
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-3 control-label">账号</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" name="name" placeholder="用户名">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">密码</label>
				<div class="col-sm-5">
					<input type="password" class="form-control"   name="password" id="password" placeholder="密码">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">确认密码</label>
				<div class="col-sm-5">
					<input type="password" class="form-control" name="checkPassword"  placeholder="确认密码">
				</div>
				<span class="col-sm-4 control-span"></span>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">手机号</label>
				<div class="col-sm-5">
					<input type="text" class="form-control" name="tphone" placeholder="手机号">
				</div>
			</div>
			<div class="form-group code">
				<label class="col-sm-3 control-label">验证码</label>
				<div class="col-sm-5 ">
					<input type="text" class="code-input form-control" name="fleshVerify" placeholder="验证码">
					<img src="{:U('Register/get_v')}" id="verifyImg" alt="code">
					<a href="JavaScript:void(0)" class="verifyImg">看不清，换一张</a>
				</div>
				<span class="col-sm-4 control-span"></span>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-5 col-sm-7 .col-xs-10 text-center">
					<button type="submit" class="btn btn-default submit">提交</button>
				</div>
			</div>
		</form>
		<script>
			$(function(){
			$("#register").validate({ 
				rules: {
				    name: {
				      	required:true
				    },
				    password: {
				      	required:true,
				      	rangelength:[6,12]
				    },
				    checkPassword: {
				    	equalTo:"#password",
				      	required:true,
				      	rangelength:[6,12]
				    },
				    tphone: {
				    	digits:true,
				    	rangelength:[11,11]
				    },
				    fleshVerify:{
				    	required:true,
				      	remote:{
	                        url: "{:U('Register/ajaxCheckVerify')}",
	                        type: "post",
	                        dataType: "json",
	                        data: {},
	                        dataFilter: function (data) {
	                        	// alert(data);
	                            if (data=="true") {
	                                return true;
	                            }
	                            else {
	                                return false;
	                            }
	                        }
                    	}
                    }
			    },
			    messages: {
			      name: {
			      	required:"请输入您的注册账户"
			      },
			      password: {
			      	required:"请输入密码",
			      	rangelength:"密码必须6-12位英文字母或数字"
			      },
			      checkPassword: {
			      	required:"请确认密码",
			      	rangelength:"两次密码必须一致",
			      	equalTo:"两次密码必须一致"
			      },
			      tphone: {
			       	digits:"请输入正确的手机号码",
			       	rangelength:"请输入正确的手机号码"
			      },
			      fleshVerify:{
				    required:"请输入验证码",
				    remote:"请输入正确的验证码"
				  }
			    },
			      // 当验证失败的时候会做的事情
				errorPlacement: function(error, element) { 
					console.log(error);
					console.log(element);
					element.parents(".form-group").append(error);
					element.parents(".form-group").addClass("has-error");
				},success: function(element) {
					// alert(element.html());
					element.parents(".form-group").removeClass("has-error");
					element.remove();
				}
			});
			      //重载验证码 
			  	$(".verifyImg").on('click',function(){
					var time=new Date().getTime();
					$(this).parent().find('#verifyImg').attr("src","{:U('Register/get_v')}"+"&random="+time);
				});
		 	})
		</script>
	</div>
</div>
<!-- footer: -->
<div class="container-fluid footer-wrap">
	<div class="container">
		<ul class="footer">
			<li>奥骞网络科技，咨询:17318218552，企业合作：17318218221</li>
			<li>版权所有：重庆奥骞网络科技有限公司  川ICP备15032603号-2：</li>
			<li>技术支持：奥骞网络</li>
		</ul>
	</div>
</div>
</body>
</html>